<template>
  	<div class="login">
        <!-- <img src="../assets/images/login-banner.png" class="banner"> -->
        <!-- <img src="../assets/images/system-name.png" class="system-name"> -->
  		<div class="form">
            <div class="tabs justify-content-between">
                <div class="tab" :class="tabActive == 1 ? 'active' : ''" @click="switchTab(1)">登录</div>
                <div class="tab" :class="tabActive == 2 ? 'active' : ''" @click="switchTab(2)">注册</div>
            </div>
            <div class="login-content" v-if="tabActive == 1">
                <div class="list">
                    <input type="text" placeholder="请输入账户名" v-model="loginName" @keyup.enter="login" />
                    <div class="icon">
                        <img src="../assets/images/icon-user.png">
                    </div>
                </div>
                <div class="list">
                    <input type="password" placeholder="请输入密码" v-model="loginPwd" @keyup.enter="login" />
                    <div class="icon">
                        <img src="../assets/images/icon-lock.png">
                    </div>
                </div>
                <div class="btn" @click="login" v-loading="loginLoading">登录</div>
            </div>
            <div class="register" v-if="tabActive == 2">
                <div class="list">
                    <input type="text" placeholder="账户名为操作人姓名" v-model="registerName" @keyup.enter="register" />
                    <div class="icon">
                        <img src="../assets/images/icon-user.png">
                    </div>
                </div>
                <div class="list">
                    <input type="password" placeholder="密码不得少于6位" v-model="registerPwd" @keyup.enter="register" />
                    <div class="icon">
                        <img src="../assets/images/icon-lock.png">
                    </div>
                </div>
                <div class="list">
                    <input type="password" placeholder="再次输入密码" v-model="registerPwdAgain" @keyup.enter="register" />
                    <div class="icon">
                        <img src="../assets/images/icon-lock.png">
                    </div>
                </div>
                <div class="btn" @click="register" v-loading="registerLoading">注册</div>
            </div>
        </div>
  	</div>
</template>

<script>
export default {
  	name: 'Login',
  	data () {
  		return {
            tabActive: 1, //tab选中项
            loginName: '', //登录名
            loginPwd: '', //登录密码
            loginLoading: '', //登录加载中
            registerName: '', //注册名
            registerPwd: '', //注册密码
            registerPwdAgain: '', //注册确认密码
            registerLoading: '' //注册加载中
  		}
  	},
    created() {
        
    },
    methods: {
        /**
         * 切换tab
         * @param {Number} index - 当前tab
         */
        switchTab(index) {
            this.tabActive = index;
        },
        // 注册
        register() {
            let _this = this;
            let params = {
                userName: _this.registerName,
                password: _this.registerPwd,
                confirmPassword: _this.registerPwdAgain
            };
            if (_this.registerName == '') {
                _this.$message.error('请输入账户名');
            } else if (_this.registerPwd.length < 6) {
                _this.$message.error('密码不得少于6位');
            } else if (_this.registerPwd != _this.registerPwdAgain) {
                _this.$message.error('两次输入密码不一致');
            } else {
                _this.registerLoading = true;
                _this.axios.userRegister(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        _this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        _this.tabActive = 1;
                    }
                    _this.registerLoading = false;
                }).catch(function (error) {
                    _this.registerLoading = false;
                    _this.$message.error(error.msg);
                });
            }
        },
        // 登录
        login() {
            let _this = this;
            let params = {
                userName: _this.loginName,
                password: _this.loginPwd
            }
            if (_this.loginName == '') {
                _this.$message.error('请输入账户名');
            } else if (_this.loginPwd == '') {
                _this.$message.error('请输入密码');
            } else {
                _this.loginLoading = true;
                _this.axios.userLogin(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        sessionStorage.setItem('username', res.data);
                        _this.$router.push('/Home');
                    } else {
                        _this.$message.error(res.msg);
                    }
                    _this.loginLoading = false;
                }).catch(function (error) {
                    _this.loginLoading = false;
                    _this.$message.error(error.msg);
                });
            }
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
	.login {width: 100%;height: 100%;background-image: url(../assets/images/login-bg.jpg);background-size: 100% 100%;position: relative;
        .banner {width: 645rem;height: 153rem;position: absolute;top: 0;left: 50%;transform: translate(-50%);}
        .system-name {width: 719rem;height: 192rem;position: absolute;top: 417rem;left: 240rem;}
		.form {width: 734.6rem;height: 568.4rem;position: absolute;top: 200rem;right: 190rem;padding: 36rem 102rem 0;
            .tabs {width: 100%;height: 60rem;
                .tab {width: 252rem;height: 100%;line-height: 60rem;text-align: center;font-size: 32rem;color: #D9D9D9;position: relative;cursor: pointer;}
                .tab.active {font-size: 36rem;color: #FFF;}
                .tab.active:after {width: 100%;height: 5px;display: block;content: "";background-color: #F8B551;position: absolute;bottom: 0;left: 0;}
            }
            .login-content {margin-top: 47rem;width: 100%;
                .list {margin-top: 42rem;}
                .list:first-child {margin-top: 0;}
                .btn {margin-top: 62rem;}
            }
            .register {margin-top: 17rem;width: 100%;
                .list {margin-bottom: 28rem;}
            }
            .list {width: 100%;height: 60rem;position: relative;
                input {width: 100%;height: 100%;padding-left: 64rem;font-size: 28rem;color: #D9D9D9;border: 2px solid #116BFF;border-radius: 5rem;background-color: transparent;}
                input::placeholder {color: #D9D9D9;}
                .icon {width: 64rem;height: 100%;position: absolute;top: 0;left: 0;
                    img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
                }
            }
            .btn {width: 100%;height: 60rem;line-height: 60rem;text-align: center;background-image: url(../assets/images/login-btn.png);background-size: 100% 100%;font-size: 36rem;color: #F2F2F2;cursor: pointer;}
        }
	}
</style>